<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<title>购物车</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="css/style.css">
	<style>
		/* 购物车页面样式 */
		.cart-page {
			min-height: calc(100vh - 200px);
			background: #f8f9fa;
			padding: 60px 0;
		}
		
		.cart-container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
		}
		
		/* 成功提示样式 */
		.success-message {
			background: #f0fff4;
			color: #2f855a;
			padding: 12px 16px;
			border-radius: 8px;
			margin-bottom: 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			border: 1px solid #c6f6d5;
		}
		
		/* 空购物车提示 */
		.empty-cart {
			background: #ebf8ff;
			color: #2c5282;
			padding: 16px;
			border-radius: 8px;
			text-align: center;
			font-size: 16px;
			border: 1px solid #bee3f8;
		}
		
		/* 标题样式 */
		.cart-title {
			color: #333;
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 30px;
		}
		
		/* 购物车表格样式 */
		.cart-table {
			width: 100%;
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 15px rgba(0,0,0,0.08);
			overflow: hidden;
		}
		
		.cart-table thead {
			background: #f7fafc;
			border-bottom: 1px solid #e2e8f0;
		}
		
		.cart-table th {
			padding: 16px;
			text-align: left;
			color: #4a5568;
			font-weight: 500;
			font-size: 14px;
		}
		
		.cart-table td {
			padding: 16px;
			border-bottom: 1px solid #e2e8f0;
			vertical-align: middle;
		}
		
		/* 商品图片样式 */
		.product-image {
			width: 80px;
			height: 80px;
			border-radius: 4px;
			overflow: hidden;
		}
		
		.product-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		/* 商品信息样式 */
		.product-info {
			display: flex;
			align-items: center;
			gap: 16px;
		}
		
		.product-name {
			color: #2d3748;
			text-decoration: none;
			font-weight: 500;
		}
		
		.product-name:hover {
			color: #4CAF50;
		}
		
		/* 数量调整器样式 */
		.quantity-adjuster {
			display: flex;
			align-items: center;
			gap: 8px;
		}
		
		.quantity-button {
			width: 28px;
			height: 28px;
			border: 1px solid #e2e8f0;
			background: white;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			color: #4a5568;
			font-size: 16px;
			transition: all 0.2s;
		}
		
		.quantity-button:hover {
			border-color: #4CAF50;
			color: #4CAF50;
		}
		
		.quantity-input {
			width: 50px;
			height: 28px;
			border: 1px solid #e2e8f0;
			border-radius: 4px;
			text-align: center;
			font-size: 14px;
			color: #2d3748;
		}
		
		.quantity-input:focus {
			outline: none;
			border-color: #4CAF50;
		}
		
		/* 价格样式 */
		.price {
			color: #2d3748;
			font-weight: 500;
		}
		
		/* 删除按钮样式 */
		.delete-button {
			padding: 6px 12px;
			background: #ff4d4f;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.3s;
		}
		
		.delete-button:hover {
			background: #ff7875;
		}
		
		/* 订单总结样式 */
		.cart-summary {
			margin-top: 24px;
			padding: 20px;
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 15px rgba(0,0,0,0.08);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 24px;
		}
		
		.total-amount {
			font-size: 16px;
			color: #2d3748;
		}
		
		.total-price {
			font-size: 20px;
			font-weight: 600;
			color: #ff4d4f;
		}
		
		.checkout-button {
			padding: 12px 24px;
			background: #4CAF50;
			color: white;
			border: none;
			border-radius: 6px;
			font-size: 16px;
			font-weight: 500;
			cursor: pointer;
			transition: all 0.3s;
		}
		
		.checkout-button:hover {
			background: #45a049;
			transform: translateY(-1px);
		}
		
		/* 响应式调整 */
		@media (max-width: 768px) {
			.cart-page {
				padding: 20px 0;
			}
			
			.cart-table {
				display: block;
				overflow-x: auto;
			}
			
			.cart-summary {
				flex-direction: column;
				align-items: stretch;
				text-align: right;
			}
			
			.checkout-button {
				width: 100%;
			}
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="layer/layer.js"></script>
	<script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
	
	<jsp:include page="header.jsp"/>
	
	<!--cart-items-->
	<div class="cart-page">
		<div class="cart-container">
			<c:if test="${msg!=null}">
				<div class="success-message">${msg}</div>
			</c:if>
			
			<c:if test="${order!=null}">
				<h2 class="cart-title">我的购物车</h2>
				
				<table class="cart-table">
					<thead>
						<tr>
							<th>图书</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="item" items="${order.itemList}">
							<tr>
								<td>
									<div class="product-info">
										<div class="product-image">
											<img src="../${item.good.cover}" alt="${item.good.name}">
										</div>
										<a href="detail?goodid=${item.good.id}" class="product-name">${item.good.name}</a>
									</div>
								</td>
								<td>
									<span class="price">¥${item.good.price}</span>
								</td>
								<td>
									<div class="quantity-adjuster">
										<button type="button" class="quantity-button" onclick="lessen(${item.good.id})">-</button>
										<input type="text" class="quantity-input" value="${item.amount}" readonly>
										<button type="button" class="quantity-button" onclick="buy(${item.good.id})">+</button>
									</div>
								</td>
								<td>
									<span class="price">¥${item.good.price * item.amount}</span>
								</td>
								<td>
									<button type="button" class="delete-button" onclick="deletes(${item.good.id})">删除</button>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				
				<div class="cart-summary">
					<div class="total-amount">总数：${order.amount} 件</div>
					<div class="total-price">总价：¥${order.total}</div>
					<a href="save" class="checkout-button">提交订单</a>
				</div>
			</c:if>
			
			<c:if test="${order==null}">
				<div class="empty-cart">购物车是空的，快去选购心仪的商品吧！</div>
			</c:if>
		</div>
	</div>
	<!--//cart-items-->
	
	<jsp:include page="footer.jsp"/>

</body>
</html>